<!--
地球自转，显示经纬线
 -->
<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
  </div>
</template>

<script>
  export default {
    name: "cesiumviewer",
    data() {
      return {
        viewer: {},
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏ceisum标识
      //this.viewer.cesiumWidget.creditContainer.style.display = 'none'; //隐藏ceisum标识

      //this.DrawOthers()
      // this.DrawLineEntity()
      this.StartSelRotate()

    },
    methods: {

      StartSelRotate() { //地球自转
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        viewer.camera.flyHome(0);
        viewer.clock.multiplier = 1 * 60 * 60; //转速为1小时
        scene.postUpdate.addEventListener(this.icrf);
        scene.globe.enableLighting = false;
      },
      icrf(scene, time) {
        let viewer = this.viewer
        let Cesium = this.Cesium
        if (scene.mode !== Cesium.SceneMode.SCENE3D) {
          return;
        }
        var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
        if (Cesium.defined(icrfToFixed)) {
          var camera = viewer.camera;
          var offset = Cesium.Cartesian3.clone(camera.position);
          var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
          camera.lookAtTransform(transform, offset);
        }
      },

      DrawLineEntity() { //绘制经线、纬线
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        for (var lon = -180.0; lon < 180.0; lon += 20.0) { //经线
          let s = -90 //南纬
          let e = 90 //北纬
          let line = Cesium.Cartesian3.fromDegreesArray([lon, s, lon, e])
          let ent = {
            polyline: {
              positions: line,
              width: 2,
              material: Cesium.Color.WHITE,
              clampToGround: true,
            }
          }
          viewer.entities.add(ent)
        }

        //生成纬线
        for (var lat = -80.0; lat <= 80; lat += 10.0) { //维度
          let langS = []
          for (let lang = -180; lang <= 180; lang += 5) {
            langS.push(lang);
            langS.push(lat);
          }
          let linelat = Cesium.Cartesian3.fromDegreesArray(langS)

          var et = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(0, lat),
            polyline: {
              positions: linelat,
              width: 2,
              material: Cesium.Color.WHITE,
              clampToGround: true,
            },
            // label: { //标注
            //   text: lat + '度',
            //   font: '16px Helvetica',
            //   fillColor: Cesium.Color.GOLD,
            //   style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            //   outlineWidth: 1,
            //   outlineColor: Cesium.Color.RED,
            //   pixelOffset: new Cesium.Cartesian3(0, -5, -2000)
            // },
          })
        }
      },

      DrawOther() {
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        var p1 = Cesium.Cartesian3.fromDegrees(0, 90, 0)
        console.log('p1', p1)
        var et = viewer.entities.add({
          position: p1,
          ellipse: {
            semiMinorAxis: 1500000,
            semiMajorAxis: 1500000,
            fill: false,
            height: 1500000, //高度，要设置，否则贴地。
            outline: true, //显示轮廓
            outlineColor: Cesium.Color.RED,
            outlineWidth: 2,
          },
        })
      },
      DrawOthers() {
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        var p1 = Cesium.Cartesian3.fromDegrees(0, 90, 0)
        const R = 3000000
        for (var r = 1; r <= 6; r += 1) {
          let height = r * 500000
          var et = viewer.entities.add({
            position: p1,
            ellipse: {
              semiMinorAxis: R,
              semiMajorAxis: R,
              fill: false,
              height: height, //高度，要设置，否则贴地。
              outline: true, //显示轮廓
              outlineColor: Cesium.Color.LIGHTSKYBLUE,
              outlineWidth: 2,
            },
          })
        }
      },
    }
  }
</script>

<style scoped="scoped">
  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }
</style>
